import React, { Fragment, Component } from 'react'
import { connect } from 'react-redux'
import { getHomeList } from './store/action'
import styles from './style.css'
import withStyle from '../../withStyle'
import { Helmet } from 'react-helmet'

class Home extends Component {
  componentDidMount() {
    if (!this.props.list.length) {
      this.props.getHomeList()
    }
  }

  render() {
    const { name, list } = this.props
    return (
      <Fragment>
        <Helmet>
          <meta charSet="utf-8" />
          <title>欢迎来到首页 - Home 组件</title>
          <meta name="description" content="首页面的描述就是没有描述" />
        </Helmet>
        <h1 className={styles.homeTest}>My first App</h1>
        <p>This is my first app,It's awesome!</p>
        <button
          onClick={() => {
            alert('hi~')
          }}
        >
          click me
        </button>
        <h1>
          name: <span style={{ color: 'violet' }}>{name}</span>
        </h1>
        {list && list.map(item => <div key={item.id}>{item.title}</div>)}
      </Fragment>
    )
  }
}

const mapStateToProps = state => ({
  list: state.home.newsList,
  name: state.home.name
})

const mapDispatchToProps = dispatch => ({
  getHomeList() {
    dispatch(getHomeList())
  }
})

Home.loadData = store => {
  // 这个静态方法是负责在服务器端渲染之前，提前加载好这个组件需要的数据
  return store.dispatch(getHomeList())
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyle(Home, styles))

// 讲师的方式：

// const ExportHome = connect(
//   mapStateToProps,
//   mapDispatchToProps
// )(withStyle(Home, styles))

// export default ExoprtHome
